Create a YouTube Clone UI with HTML and CSS (Source code)

Faraz

By Faraz -

Learn how to create a YouTube Clone UI with HTML and CSS. This tutorial is perfect for beginners in front-end development.

Join us on Telegram
create a youtube clone ui with html and css.jpg
Read Alsocreate-a-responsive-medical-landing-page-with-html-css-and-javascript.webpCreate a Responsive Medical Landing Page with HTML, CSS, and JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Conclusion
  5. Preview

Front-end development is a crucial skill for anyone looking to build a career in web development. It involves building the visual and interactive parts of a website, using technologies like HTML, CSS, and JavaScript. In particular, HTML and CSS are the building blocks of front-end development, forming the foundation of every website and web application.

In this tutorial, we will show you how to create a YouTube Clone UI using HTML and CSS. This tutorial is aimed at beginners in front-end development, but it will also be useful for those looking to improve their skills. By the end of the tutorial, you will have created a functional YouTube Clone UI, and you will have gained a deeper understanding of how HTML and CSS work together to build websites.

Cloning a website or application can offer several benefits, especially when you're trying to learn new development skills or build a new project. Some of the benefits of cloning a website like YouTube include:

  1. Learning new skills: By cloning a website, you can learn new development skills and techniques that can be applied to your own projects. You can see how the website was built, the technologies used, and how the different elements are integrated to create the final product.
  2. Time-saving: Cloning a website can save you a lot of time and effort, especially if you're building a similar application or website. Rather than starting from scratch, you can use an existing website as a template and build upon it.
  3. Testing and experimentation: Cloning a website can be a great way to experiment with new features or design elements, without the risk of damaging the original website. You can test different layouts, colors, and functionalities to see what works best.
  4. Inspiration and reference: Cloning a website can also provide inspiration for your own projects. You can examine the design and functionality of the website and incorporate elements into your own work. Additionally, cloned websites can serve as a reference point for your own projects, providing a clear example of what you're trying to achieve.

We will guide you through the process of planning and setting up the HTML structure, as well as adding basic styles to the video player. This tutorial is a practical and engaging project that will help you learn by doing. We will provide step-by-step instructions, code examples, and screenshots to help you understand the concepts. Whether you're a beginner or an experienced developer, this tutorial will help you improve your HTML and CSS skills and take your front-end development to the next level.

Let's start making an amazing YouTube clone UI using HTML, and CSS step by step.

Join My Telegram Channel to Download the Projects Source Code: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our YouTube clone.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

The code begins with the html element, which specifies that the language is English. The head element contains metadata, such as character encoding, viewport, and links to external stylesheets and fonts. The body element contains the main content of the webpage.

Inside the body element, there is a nav element that contains the navigation bar. It includes a menu button, a YouTube logo, a search field with a search button and a voice button, and other navigation options, such as create, YouTube apps, notifications, and user avatar.

Next, there is a div element with the class name chips, which contains a list of categories or tags. Each category is displayed as a div element with the class name chips__item. The selected category has an additional class name of chips__item--selected.

Finally, there is a div element with the class name sidebar that contains a list of links to different sections of the website. Each link is displayed as an a element with the class name sidebar__section__link. The selected link has an additional class name of sidebar__section__link--selected.

This is the basic structure of our YouTube clone using HTML, and now we can move on to styling it using CSS.

Read AlsoCreate Animated Button with Hover Effect HTML & CSS Tutorial.jpgCreate Animated Button with Hover Effect | HTML & CSS Tutorial

Step 2 (CSS Code):

Once the basic HTML structure of the YouTube clone is in place, the next step is to add styling to the YouTube clone using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our clone website.

Here is a breakdown of what each section of the code does:

body: This is a selector that targets the entire body of the web page. The properties inside the curly braces set the margin and padding to 0 and set the font family to "Roboto", "Arial", or a generic sans-serif font.

svg: This selector targets all svg elements on the page and sets the fill color to a dark grey color.

.navigation: This is a class selector that targets a navigation bar element. The properties inside the curly braces set the padding, display, height, position, and background color of the navigation bar.

.navigation__button: This selector targets all buttons within the navigation bar element. The properties inside the curly braces set the border, padding, background color, and cursor to change to a pointer on hover.

.navigation__menu, .navigation__search, and .navigation__options: These are class selectors that target specific elements within the navigation bar element. .navigation__menu targets a menu element, .navigation__search targets a search bar element, and .navigation__options targets a container for other navigation options. The properties inside the curly braces set the display to flex and align items to center for each of these elements.

.navigation__options .navigation__button: This selector targets all buttons within the .navigation__options container. The property inside the curly braces sets the margin-right to 8px.

.navigation__menu img: This selector targets all images within the menu element. The property inside the curly braces sets the margin-left to 5px.

.navigation__menu__button svg: This selector targets an svg element within the menu button element. The property inside the curly braces sets the height to 24px.

.navigation__search input: This selector targets the input element within the search bar. The properties inside the curly braces set the width, height, border, font size, and padding.

.navigation__search__icon: This selector targets an icon element within the search bar. The properties inside the curly braces set the border, height, width, and border-left to none.

.navigation__search__icon:hover: This selector targets the same icon element but changes the background color to a light grey on hover.

.navigation__search__icon svg: This selector targets an svg element within the icon element. The properties inside the curly braces set the height and width.

.navigation__options: This selector targets the container for navigation options. The property inside the curly braces sets the display to flex.

.navigation__icon and .navigation__avatar: These selectors target icon and avatar elements in the navigation bar. The properties inside the curly braces set the dimensions and styling for each of these elements.

.chips: This is a class selector that targets a container for "chips" or tags on the web page. The properties inside the curly braces set the border, display, position, top, right, left, and background color for the container.

.chips__item: This selector targets each individual tag or "chip" within the container. The properties inside the curly braces set the border, background color, font size, padding, line-height, border-radius, margin, and cursor for each chip.

.chips__item:first-child: This selector targets the first chip element within the container and sets the margin-left to 24px.

.chips__item--selected: This selector targets a selected chip element and changes the background color to black and the text color to white.

.sidebar: Applies styles to a sidebar element. It sets the width to 240 pixels, fixes its position, and aligns it to the left of the page. The sidebar stretches from the top of the page (56px from the top) to the bottom. It also applies padding to the top and bottom of the sidebar, and sets the height of the sidebar to be equal to the viewport height minus 80 pixels. Finally, it adds a vertical scrollbar to the sidebar.

.sidebar__section: Applies styles to sections within the sidebar. It adds padding at the top and bottom of each section, and a border at the bottom of each section with a light gray color.

.sidebar__section h3: Applies styles to the headings within the sidebar sections. It adds padding to the top and bottom of the headings, sets the font size to 13 pixels, makes the text uppercase, and sets the text color to a dark gray color.

.sidebar__section__link: Applies styles to the links within the sidebar sections. It sets the display property to flex, which makes the links behave like a flex container. It also sets the link color to a dark color, removes the underline from the link, and aligns the link items to the center. It adds padding to the left and right of each link and sets the height of each link to 40 pixels.

.sidebar__section__link svg and .sidebar__section__avatar: Applies styles to SVG icons and avatars within the sidebar links. It sets the height and width of the icons and avatars to 24 pixels and adds margin to the right of the icons.

.sidebar__section__avatar: Applies styles to the avatar images within the sidebar links. It adds a circular border radius to the avatar and sets a gray background color.

.sidebar__section__link--selected: Applies styles to the selected sidebar links. It sets the background color of the selected link to a light gray color and increases the font weight to 500.

.sidebar__section__link--selected svg: Applies styles to the selected link's SVG icons. It sets the fill color of the icons to red.

.sidebar__section:last-child: Applies styles to the last sidebar section. It adds padding at the top and bottom of the section and removes the border from the bottom of the section.

.sidebar__section:last-child p: Applies styles to the paragraphs within the last sidebar section. It sets the font size to 13 pixels and the text color to a light gray color.

.sidebar__section__link--small: Applies styles to the smaller sidebar links. It sets a smaller margin to the right of the link, sets the font size to 13 pixels, increases the font weight to 500, and sets the text color to a gray color.

.feed: Applies styles to the main content area of the page, which is located to the right of the sidebar. It sets the margin from the top of the page to 140 pixels and the margin from the left of the page to 240 pixels. It sets the display property to flex, which makes the content behave like a flex container, and allows it to wrap onto multiple lines.

.feed__item: Applies styles to individual items within the main content area. It sets margins on all sides of each item.

.feed__item__thumbnail: Applies styles to the thumbnail image within each item. It sets the width and height of the thumbnail to 360 pixels by 202 pixels and sets a gray background color.

.feed__item__info: Defines the styling properties for the information section of a feed item. It has a display property of flex to make its child elements align horizontally, a font-size of 14px, and a color of rgb(96, 96, 96) for the text color.

.feed__item__info h3: Styles the heading element within the information section of a feed item. It has a font-size of 16px, a font-weight of 500, a margin-bottom of 4px, and a color of rgb(3, 3, 3) for the text color.

.feed__item__info a: Styles the anchor elements within the information section of a feed item. It removes the underline from the text with text-decoration: none and sets the color to the default value with color: unset.

.feed__item__info p: Styles the paragraph elements within the information section of a feed item. It sets the margin to 0 to remove any default margins.

.feed__item__info__avatar: Styles the avatar within the information section of a feed item. It sets a height and width of 36px, border-radius of 50% to create a circular shape, a background-color of grey and a margin of 12px 12px 0 0.

.feed__section: Defines the styling properties for a feed section. It has a border-top and border-bottom of 3px solid lightgrey and a margin of 24px 35px 48px.

.feed__section h2: Styles the heading element within a feed section. It has a margin-left of 8px.

.feed__section__items: Defines the styling properties for a feed section's items. It has a display property of flex, so that its child elements align horizontally, flex-wrap of wrap to wrap items to the next line if there is not enough space, and justify-content of center to align the items in the center of the section.

This will give our YouTube clone UI an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

body {
  margin: 0;
  padding: 0;
  font-family: Roboto, Arial, sans-serif;
}

svg {
  fill: rgb(96, 96, 96);
}

.navigation {
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  height: 56px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background-color: white;
}

.navigation__button {
  border: none;
  padding: 5px 10px;
  background-color: transparent;
  cursor: pointer;
  line-height: 5px;
}

.navigation__menu,
.navigation__search,
.navigation__options {
  display: flex;
  align-items: center;
}

.navigation__options .navigation__button {
  margin-right: 8px;
}

.navigation__menu img {
  margin-left: 5px;
}

.navigation__menu__button svg {
  height: 24px;
}

.navigation__search input {
  width: 360px;
  height: 32px;
  border: 1px solid rgb(211, 211, 211);
  font-size: 16px;
  padding: 3px 8px;
}

.navigation__search__icon {
  border: 1px solid rgb(211, 211, 211);
  border-left: none;
  height: 32px;
  width: 65px;
}

.navigation__search__icon:hover {
  background-color: #e4e4e4;
}

.navigation__search__icon svg {
  height: 20px;
  width: 20px;
}

.navigation__options {
  display: flex;
}

.navigation__icon {
  width: 24px;
  height: 24px;
}

.navigation__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: grey;
}

.chips {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  position: fixed;
  top: 56px;
  right: 0;
  left: 240px;
  background-color: white;
}

.chips__item {
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.05);
  font-size: 14px;
  padding: 0 12px;
  line-height: 30px;
  border-radius: 16px;
  margin: 12px 12px 12px 0;
  cursor: pointer;
}

.chips__item:first-child {
  margin-left: 24px;
}

.chips__item--selected {
  background-color: black;
  color: white;
}

.sidebar {
  width: 240px;
  position: fixed;
  top: 56px;
  left: 0;
  bottom: 0;
  padding: 12px 0;
  height: calc(100vh - 80px);
  overflow-y: scroll;
}

.sidebar__section {
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sidebar__section h3 {
  padding: 8px 24px;
  font-size: 13px;
  text-transform: uppercase;
  color: rgb(96, 96, 96);
}

.sidebar__section__link {
  display: flex;
  color: rgb(3, 3, 3);
  text-decoration: none;
  align-items: center;
  font-size: 14px;
  padding: 0 24px;
  height: 40px;
}

.sidebar__section__link svg,
.sidebar__section__avatar {
  height: 24px;
  width: 24px;
  margin-right: 24px;
}

.sidebar__section__avatar {
  border-radius: 50%;
  background-color: grey;
}

.sidebar__section__link--selected {
  background-color: rgba(0, 0, 0, 0.1);
  font-weight: 500;
}

.sidebar__section__link--selected svg { 
  fill: #f00
}

.sidebar__section:last-child {
  padding: 16px 24px 0 24px
}

.sidebar__section:last-child p {
  font-size: 13px;
  color: #909090;
}

.sidebar__section__link--small {
  margin-right: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #606060;
  text-decoration: none;
}

.feed {
  margin-top: 140px;
  margin-left: 240px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.feed__item {
  margin: 0 8px 40px 8px;
}

.feed__item__thumbnail {
  width: 360px;
  height: 202px;
  background-color: grey;
}

.feed__item__info {
  display: flex;
  font-size: 14px;
  color: rgb(96, 96, 96);
}

.feed__item__info h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
  color: rgb(3, 3, 3);
}

.feed__item__info a {
  text-decoration: none;
  color: unset;
}

.feed__item__info p {
  margin: 0;
}

.feed__item__info__avatar {
  height: 36px;
  width: 36px;
  border-radius: 50%;
  background-color: grey;
  margin: 12px 12px 0 0;
}

.feed__section {
  border-top: 3px solid lightgrey;
  border-bottom: 3px solid lightgrey;
  margin: 24px 35px 48px;
}

.feed__section h2 {
  margin-left: 8px;
}

.feed__section__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

Final Output:

create a youtube clone ui with html and css.gif
Read Alsocreate a responsive car rental landing page using html and css.webpCreate a Responsive Car Rental Landing Page: HTML & CSS Guide

Conclusion:

In conclusion, we have shown you how to create a YouTube Clone UI using HTML and CSS. We hope that you found this tutorial informative and engaging, and that you were able to learn new skills and improve your existing ones.

By following our step-by-step instructions, you were able to create a functional YouTube Clone UI, which can be used as a starting point for your own projects. You also gained a deeper understanding of how HTML and CSS work together to build websites, which is a crucial skill for any front-end developer.

We encourage you to continue learning and practicing HTML and CSS, and to explore other front-end development technologies like JavaScript and React. The world of web development is constantly evolving, and there is always more to learn.

Thank you for following along with our tutorial, and we wish you the best of luck in your front-end development journey!

Code by: Shamim Imtiyaz

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: youtube clone ui, html and css, front-end development, how to create a youtube clone ui, youtube website design, html and css for beginners, front-end development tutorial
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺